<script setup>
import { throttle } from 'lodash'
import QRCode from 'qrcode'
onMounted(() => {
    QRCode.toCanvas(document.getElementById('qrcode-app'), "https://a.app.qq.com/o/simple.jsp?pkgname=com.yquestion.zzwx", {
        width: 80,
        height: 80,
        color: {
            dark: '#000000', // 黑色
            light: '#ffffff' // 白色
        }
    }, function (error) {
        if (error) console.error(error);
        console.log('QR code generated successfully!');
    });
    QRCode.toCanvas(document.getElementById('qrcode-contact'), "https://work.weixin.qq.com/kfid/kfc4d5c47ec0d5a0db2", {
        width: 80,
        height: 80,
        color: {
            dark: '#000000', // 黑色
            light: '#ffffff' // 白色
        }
    }, function (error) {
        if (error) console.error(error);
        console.log('QR code generated successfully!');
    });
  window.addEventListener('scroll', handleScroll);


});


onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
const router=useRouter();
const showToTopIcon=ref(false)


const handleScroll=throttle(() =>{
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    // const windowHeight = window.innerHeight;//包括滚动条高度
    // const documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;//包括元素的内边距，但不包括元素的边框、外边距以及水平滚动条


    if (scrollTop>100) {
      showToTopIcon.value=true;
    }else{
        showToTopIcon.value=false;
    }
  }, 300)
function toTop(){
    window.scrollTo(window.scrollX, 0)
}



function goWeixin(){
    // window.location.href="weixin://open/command/openWeChat?url=https://work.weixin.qq.com/kfid/kfc4b2d7f9d59492bee"
    window.open("https://work.weixin.qq.com/kfid/kfc4b2d7f9d59492bee")
    // window.open("https://work.weixin.qq.com/kfid/kfcb2910a0a95a70686")
}
</script>

<template>
      <div class="sidebar" data-theme="light">
                <!-- <div class="shopCartBox sidebarList">
                    <div class="shopCartBtn"></div>
                    <div class="sidebarText">购物车</div>
                </div> -->
                <div class="qrcodeBox sidebarList">
                    <div class="qrCodeBtn"></div>
                    <div class="sidebarText">扫码下载</div>
                    <div class="codeBox">
                        <div class="codeSanJiao"></div>
                        <div class="codeImg codeImgweixin">
                            <img
                                src="@/assets/images/qrcode.jpg"
                                alt="" class="img">
                            <div class="text_code">关注公众号</div>
                        </div>
                        <div class="codeImg">
                            <canvas id="qrcode-app"></canvas>
                            <!-- <img
                                src="https://static.sieredu.com/upload/0/yzl/common/2024011118/41f21681737ef79dbddeee51691ed7ea.jpg"
                                alt="" class="img"> -->
                            <div class="text_code">下载APP</div>
                        </div>
                    </div>
                </div>
                <div class="consultBox sidebarList zhiCustomBtn">
                    <div class="consultBtn" ></div>
                    <div class="sidebarText">在线客服</div>
                    <div class="codeBox">
                        <div class="codeSanJiao"></div>
                        <div class="codeImg">
                            <canvas id="qrcode-contact"></canvas>
                        </div>
                    </div>
                </div>
                <div class="backTopBox sidebarList" v-show="showToTopIcon" @click="toTop">
                    <div class="backTopIcon"></div>
                </div>
                <div data-v-bc3c958c="" class="componentDialog" data-theme="light"></div>
            </div>
</template>

<style scoped>
.sidebar {
    position: fixed;
    right: 20px;
    bottom: 100px;
    padding: 15px 8px;
    z-index: 10;
    background: var(--bg_white);
    border-radius: 15px;
    border: 1px solid var(--gray_95);
}

.sidebar .sidebarList {
    cursor: pointer;
}

.sidebar .shopCartBox {
    margin-bottom: 12px;
}

.sidebar .shopCartBox .shopCartBtn {
    width: 36px;
    height: 36px;
    background: url('@/assets/images/sideBar.png') no-repeat 0 0;
    background-size: 540px 288px;
    margin: 0 auto;
}

.sidebar .sidebarList .sidebarText {
    margin-top: 4px;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    -webkit-transition: all .2s;
    transition: all .2s;
    color: var(--gray_50);
}

.sidebar .qrcodeBox {
    margin-bottom: 12px;
    position: relative;
}

.sidebar .qrcodeBox .qrCodeBtn {
    width: 36px;
    height: 36px;
    background: url('@/assets/images/sideBar.png') no-repeat 0 -36px;
    background-size: 540px 288px;
    margin: 0 auto;
}

.sidebar .sidebarList .sidebarText {
    margin-top: 4px;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    -webkit-transition: all .2s;
    transition: all .2s;
    color: var(--gray_50);
}

.sidebar .codeBox {
    box-sizing: border-box;
    width: 280px;
    height: 186px;
    color: var(--gray_20);
    background-color: var(--bg_white);
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
    border-radius: 20px;
    position: absolute;
    left: -300px;
    top: -75px;
    z-index: 10;
    text-align: center;
    -webkit-transition: all .2s;
    transition: all .2s;
    display: none;
    padding: 40px;
}

.sidebar .codeBox .codeSanJiao {
    width: 16px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    height: 12px;
    position: absolute;
    right: -14px;
    top: 86px;
    background: var(--headUserSanjiao) no-repeat;
    background-size: 100%;
    display: inline-block;
}

.sidebar .codeBox .codeImg {
    line-height: 24px;
    font-size: 14px;
}

.sidebar .codeBox .codeImgweixin {
    margin-right: 40px;
}

.sidebar .codeBox .codeImg .img {
    width: 80px;
    height: 80px;
    background: #d8d8d8;
    border-radius: 11px;
    display: block;
}

.sidebar .codeBox .codeImg {
    line-height: 24px;
    font-size: 14px;
}





.sidebar .consultBox {
    margin-bottom: 12px;
    position: relative;
}

.sidebar .consultBox .consultBtn {
    width: 36px;
    height: 36px;
    background: url('@/assets/images/sideBar.png') no-repeat 0 -180px;
    background-size: 540px 288px;
    margin: 0 auto;
}

.sidebar .sidebarList .sidebarText {
    margin-top: 4px;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    -webkit-transition: all .2s;
    transition: all .2s;
    color: var(--gray_50);
}

.sidebar .backTopBox {
    width: 62px;
    height: 62px;
    box-sizing: border-box;
    position: absolute;
    margin-top: 30px;
    padding: 13px 10px;
    right: -1px;
    background: var(--bg_white);
    border: 1px solid var(--gray_95);
    box-shadow: 0 2px 6px rgba(30, 109, 148, .0392156862745098);
    border-radius: 15px;
}

.sidebar .backTopBox .backTopIcon {
    width: 36px;
    height: 36px;
    background: url('@/assets/images/sideBar.png') no-repeat -36px 0;
    background-size: 540px 288px;
    margin: 0 auto;
}
.sidebar .qrcodeBox:hover .codeBox,.sidebar .consultBox:hover .codeBox{
    display: flex;
}

.sidebar .sidebarList:hover .sidebarText {
    color: var(--green_n);
}
.sidebar .qrcodeBox:hover .qrCodeBtn {
    background-position: -144px -36px;
}
.sidebar .consultBox:hover .consultBtn {
    background-position: -144px -180px;
}
#qrcode-app{
    width: 80px;
    height: 80px;
}
</style>